import { FC, useState } from 'react'
import { Layout, Menu, Button, theme } from 'antd'
import { Outlet } from 'react-router'
import { Link } from 'react-router-dom'
const { Header, Footer, Sider, Content } = Layout
import { AppstoreOutlined, ContainerOutlined, DesktopOutlined, MailOutlined, PieChartOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import type { MenuProps } from 'antd'

type MenuItem = Required<MenuProps>['items'][number]

function getItem(label: React.ReactNode, key: React.Key, icon?: React.ReactNode, children?: MenuItem[], type?: 'group'): MenuItem {
  return {
    key,
    icon,
    children,
    label: <Link to={key.toString()}>{label}</Link>,
    type,
  } as MenuItem
}

const items: MenuItem[] = [
  getItem('首页', '/home', <PieChartOutlined />),
  getItem('关于', '/about', <DesktopOutlined />),
  getItem('Option 3', '3', <ContainerOutlined />),

  getItem('Navigation One', 'sub1', <MailOutlined />, [getItem('Option 5', '5'), getItem('Option 6', '6'), getItem('Option 7', '7'), getItem('Option 8', '8')]),

  getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
    getItem('Option 9', '9'),
    getItem('Option 10', '10'),

    getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
  ]),
]

const Layouts: FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken()
  const [collapsed, setCollapsed] = useState(false)

  const toggleCollapsed = () => {
    setCollapsed(!collapsed)
  }
  return (
    <>
      <Layout style={{ height: '100%' }}>
        <Sider collapsed={collapsed}>
          <div className="h-[64px] flex items-center justify-center">
            <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" className="h-[32px] mr-[12px]" />
            {collapsed ? null : <span className="text-white text-[18px] font-bold whitespace-nowrap">Ant Design</span>}
          </div>
          <Menu defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} mode="inline" theme="dark" items={items} />
        </Sider>
        <Layout>
          <Header className="bg-white flex px-0 py-0">
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={toggleCollapsed}
              style={{
                fontSize: '16px',
                width: 64,
                height: 64,
              }}
            />
          </Header>
          <Content
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
              background: colorBgContainer,
            }}
          >
            <Outlet />
          </Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
    </>
  )
}

export default Layouts
